import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView } from '@tarojs/components'
import NavigationBar from '../../../components/navigationBar/index';

import './index.scss'
import { goodsList } from '../../../services/goods';
import { fullImgUrl } from '../../../utils/utils';

export default class Index extends Component {

  config = {
    navigationBarTitleText: '购物',
  }

  state = {
    list: [],
    pageObj: {
      page: 1,
      page_number: 10,
      goods_type:1
    },
    isMore: false,
    navigationBarHeight: Taro.getStorageSync('navigationBarHeight'),
  };

  componentWillMount() {}
  componentDidMount() {
    goodsList({
      ...this.state.pageObj
    }).then(res => {
      if(res.list.length==0){
        Taro.showToast({
          title: '商城维护中，请敬请期待',
          icon: 'none',
        });
        setTimeout(() => {
          Taro.redirectTo({
            url: '/pages/home/index',
          });
        }, 500);
      
      }
      res.list.forEach(goods => {
        goods.banner = fullImgUrl(goods.cover)
      });
      this.setState({
        isMore: res.list.length < res.total,
        list: res.list
      })
    })
  }

  goGoodsDetail(id) {
    Taro.navigateTo({
      url: `/pages/goods-detail/index?id=${id}`
    })
  }

  render () {
    const { list } = this.state;
    return (
      <View className='goods-list' style={`margin-top: ${navigationBarHeight}`}>
        <NavigationBar text="购物" />
        {
          list.map(goods => {
            return <View onClick={() => {this.goGoodsDetail(goods.goods_id)}} className="goods-list-item" key={goods.goods_id}>
              <Image className="banner" src={goods.banner} />
              <View className="goods-info">
                <View>{goods.goods_name}</View>
                <View>￥{goods.min_price}-￥{goods.max_price}</View>
              </View>
              <View className="goods-desc">{goods.goods_desc}</View>
            </View>
          })
        }
      </View>
    )
  }
}

